<template>
  <div>
    <NuxtLayout name="home-page" :title="title">
      <div class="archive">
        <div class="collapse collapse-arrow bg-base-100 border border-base-300 mb-4 shadow-2xl transition-transform duration-500" v-for="(item,index) in archiveYearList"
             :key="index">
          <input type="checkbox" checked/>
          <div class="collapse-title text-xl font-medium">
            {{ item.year }}
          </div>
          <div class="collapse-content">
            <div v-for="(children, index) in item.archiveMap">
              <div class="rounded-md my-4">
                <p class="text-xl font-medium">{{ index }}</p>
                <ul class="menu menu-lg p-2 rounded-box">
                  <li class="font-bold" v-for="(child, index) in children" :key="index">
                    <NuxtLink :to="`/article/${child.articleId}`">
                      <div class="badge badge-primary badge-outline">{{ child.createTime }}</div>
                      <div>
                        {{ child.articleTitle }}
                      </div>
                    </NuxtLink>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </NuxtLayout>
  </div>
</template>
<script lang="ts" setup>
import type {ArchiveGroupYearWebVo} from "~/api/article/types";
import {queryArticleArchiveList} from "~/api/article";

const title = ref<string>("归档")
useHead({
  title: title.value,
  titleTemplate: title => `${title} - Annlcc's Blog`,
})

const archiveYearList = ref<ArchiveGroupYearWebVo[]>([])

const getArchiveYearList = async () => {
  const {data: res} = await useAsyncData("queryArchiveList", () =>
      queryArticleArchiveList()
  );
  archiveYearList.value = res.value as ArchiveGroupYearWebVo[]
}

getArchiveYearList()
</script>
